<template>
	<div class="page">
		<view-box ref="viewBox">
			<!-- :right-options="{showMore: true}"-->
			<x-header class='header' slot="header" :left-options="{backText: '',preventGoBack:true}">数据监测
				<span slot="left" style="margin-left: 12px; color: #fff;" id="back">返回</span>

				<!--<a slot="right" style="color: #fff;" @click="showMeuu">asd<!-- -->
				<div slot="right" v-if="name=='' || name==null" style="color: #fff;">选择人员</div>
				<popup-picker id='picker' slot="right" :title='name' :data='items' confirm-text="确定" @on-change='change' style='color: #fff;'></popup-picker>
				<!--</a>-->
			</x-header>
			<div class="top" style="height: 50px; width: 100%"></div>
			<!--theme="android"-->
			<!--<tab active-color="rgb(58, 175, 252)">
				<tab-item selected @on-item-click="onItemClick">血压</tab-item>
				<tab-item @on-item-click="onItemClick">血糖</tab-item>
				<tab-item @on-item-click="onItemClick">体重</tab-item>
			</tab>-->
			<ul class="list">
				<li v-for="item in tabData" @click="selectItem(item.tab_item)" :class="{active:currentTab == item.tab_item}">
					<span>{{item.title}}</span>
				</li>
			</ul>
			<!--<div style="width: 100%;padding: 10px;">
		    	<button-tab>
		        <button-tab-item selected @on-item-click="onItemClick">血压</button-tab-item>
		        <button-tab-item @on-item-click="onItemClick">血糖</button-tab-item>
		        <button-tab-item @on-item-click="onItemClick">体重</button-tab-item>
		      </button-tab>
		    </div>-->

			<!-- 选择人员弹窗 -->
			<div v-transfer-dom>
				<x-dialog v-model="showToast" class="dialog-demo" :hide-on-blur="true">
					<div style="padding:15px;" id="grid-center">
						<grid :show-vertical-dividers="true">
							<grid-item>
								<span class="grid-center" v-for="item in items">
						        	<x-button mini class='btnoo' @click.native='change(item.realName,item.customer_id)'>
						        		{{ item.realName }}
						        	</x-button>
						        </span>
								<x-button @click.native="toPerson" class='btnoo' style='margin-top: 20px !important;'>添加人员</x-button>
							</grid-item>
						</grid>
					</div>
					<div @click="showToast=false">
						<span class="vux-close"></span>
					</div>
				</x-dialog>
			</div>

			<transition name='fade' mode='out-in'>
				<components :is='currentTab'></components>
			</transition>
		</view-box>

		<!-- 底部 tab 栏 -->
		<tabbar>
			<tabbar-item @on-item-click='toHealBase'>
				<img slot="icon" src="@/assets/image/heal.png">
				<span slot="label" class="nostate" style="color: #3aaffc;">健康档案</span>
			</tabbar-item>
			<tabbar-item @on-item-click='toDatamonitor' :selected="selected" ref='selectedItem'>
				<img slot="icon" src="@/assets/image/index.png">
				<img slot="icon-active" src="@/assets/image/index_active.png">
				<span slot="label">数据监测</span>
			</tabbar-item>
			<tabbar-item @on-item-click='toCase'>
				<img slot="icon" src="@/assets/image/scheme.png">
				<img slot="icon-active" src="@/assets/image/scheme_active.png">
				<span slot="label" class="nostate">健康病历</span>
			</tabbar-item>
			<tabbar-item @on-item-click='toImprove'>
				<img slot="icon" src="@/assets/image/improve.png">
				<img slot="icon-active" src="@/assets/image/improve_active.png">
				<span slot="label" class="nostate">改善方案</span>
			</tabbar-item>
		</tabbar>
		<!-- 子页面 -->
		<transition>
			<!-- enter-active-class='fadeIn animated' leave-active-class='fadeOut animated'-->
			<router-view>
			</router-view>
		</transition>
	</div>
</template>

<script>
	//	import { mapState, mapMutations, mapActions } from 'vuex';
	import Api from '@/api/index.js' //  引入api文件

	import Bloodpressure from './tab/Bloodpressure.vue' //  血压
	import BloodSugar from './tab/BloodSugar.vue' //  血糖
	import Weight from './tab/Weight.vue' //  体重
	export default {
		components: {
			Bloodpressure,
			BloodSugar,
			Weight
		},
		inject: ['reload'], //  注入reload 方法
		data() {
			return {
				year1: [''],
				customer_id: '',
				showToast: false,
				selected: true,
				name: '选择人员',
				tabData: [{
					title: '血压',
					tab_item: 11
				}],
				currentTab: 'Bloodpressure',
				items: [],
				tabData: [{
						title: '血压',
						tab_item: 'Bloodpressure'
					},
					{
						title: '血糖',
						tab_item: 'BloodSugar'
					},
					{
						title: '体重',
						tab_item: 'Weight'
					}
				]
			}
		},
		computed: {
			//			...mapState([
			//				'customer_id',
			//				'realName'
			//			])
		},
		//  在子页面  /datamonitor/addpre  添加血压数据返回的时候是需要更新数据的    添加完数据后返回刷新
		beforeRouteUpdate(to, from, next) {
			this.reload()
			next();
		},
		created() {
			// 初始化数据
			this.getData()

			this.customer_id = localStorage.getItem('customer_id');
			this.name = localStorage.getItem('realName');
		},
		mounted() {
			//  与安卓交互， 点击返回app主页面
			document.getElementById('back').onclick = function() {
				android.showToast("000000");
			}
		},
		methods: {
			selectItem(item) {
				this.currentTab = item;
			},
			// 选择人员
			change(value) {
				console.log(value)
				if(value[0] === '添加人员') {
					this.$router.push('/addperson');
				}
				this.items.forEach(ele => {
					ele.map(e => {
						if(e.customer_id == value[0]) {
							localStorage.setItem('customer_id', e.customer_id);
							localStorage.setItem('realName', e.realName);
							this.reload()
						}
					})
				})
			},
			//  全局方法转为自身方法
			//			...mapMutations([
			//				'changeCustomer_id',
			//				'changeRealName'
			//			]),
			//			//  使用actions 修改
			//			...mapActions([
			//				'changePerson'
			//			]),
			//  选择人物
			//			change(realName, customer_id) {
			//				this.name = realName;
			//				localStorage.setItem('customer_id',customer_id);
			//				localStorage.setItem('realName',realName)
			//				//  使用 vuex 全局修改  customer_id 和 realName   不可用vuex  跳转页面 数据变为原始的
			////				this.$store.dispatch('changePerson', {
			////					customer_id: customer_id,
			////					realName: realName
			////				})
			//				this.showToast = false;
			//				this.reload()
			//			},
			// 得到 人物数据
			getData() {
				this.$http.post(Api.health_recordApi)
					.then(({
						data
					}) => {
						this.items = data.data;
						//  因为vux popup-picker组件 需要的是 name 和 value，但在后台是 customer_id 和  realName ，所以需要添加name和value
						var reformattedArray2 = this.items.map(function(obj, index) {
							obj.value = obj.customer_id; //添加value属性
							obj.name = obj.realName;
							return obj; //如果不返回则输出： Array [undefined, undefined, undefined]
						});
						// 创建一个添加人员的对象
						let obj = {};
						obj.name = '添加人员';
						obj.value = '添加人员'
						reformattedArray2.push(obj)
						// 默认名字 
						if(localStorage.getItem('customer_id') == null) {
							this.name = reformattedArray2[0].name;
							localStorage.setItem('customer_id', reformattedArray2[0].customer_id);
							localStorage.setItem('realName', reformattedArray2[0].realName)
						}

						this.items = [reformattedArray2]

						//						if(localStorage.getItem('customer_id') == null) {
						//							this.name = this.items[0].realName;
						//							localStorage.setItem('customer_id',this.items[0].customer_id);
						//							localStorage.setItem('realName',this.items[0].realName)
						//						}

					})
					.catch((err) => {
						console.log(err)
					})
			},
			//  显示菜单
			showMeuu() {
				//				this.showToast = true;
				this.isShow = true
			},
			//  去到 person 页面
			toPerson() {
				this.$router.push({
					path: '/person'
				})
			},
			//  数据监测  切换tab栏   切换组件
			//			onItemClick(index) {
			//				console.log(index)
			//				if(index === 0) {
			//					this.currentTab = 'Bloodpressure'
			//				} else if(index === 1) {
			//					this.currentTab = 'BloodSugar'
			//				} else {
			//					this.currentTab = 'Weight'
			//				}
			//			},
			// 去到健康档案
			toHealBase() {
				this.$router.push({
					path: '/healthbase'
				})
			},
			// 去到 数据监测
			toDatamonitor() {
				this.$router.replace({
					path: '/datamonitor'
				})
			},
			// 健康病历
			toCase() {
				this.$router.replace({
					path: '/case'
				})
			},
			// 去到 改善方案
			toImprove() {
				this.$router.replace({
					path: '/improve'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	/*//消失时间持续3s*/
	
	.fade-enter-active {
		transition: all 0.2s;
	}
	/*//显示时间持续1.5s*/
	
	.fade-leave-active {
		transition: all 0.2s;
	}
	
	.fade-enter,
	.fade-leave-active {
		opacity: 0;
	}
	
	#grid-center .btnoo {
		background-color: rgb(58, 175, 252) !important;
		color: #fff !important;
		margin: 4px !important;
	}
	
	.list {
		width: 100%;
		height: 40px;
		display: flex;
		border-bottom: 1px solid #e5e5e5;
		li {
			flex: 1;
			text-align: center;
			line-height: 40px;
			color: #666;
			font-size: 14px;
		}
		.active {
			border-bottom: 2px solid rgb(58, 175, 252);
			color: rgb(58, 175, 252);
		}
	}
	
	@import '~vux/src/styles/close';
	.dialog-demo {
		.weui-dialog {
			border-radius: 8px;
			padding-bottom: 8px;
		}
		.dialog-title {
			line-height: 30px;
			color: #666;
		}
		.img-box {
			height: 350px;
			overflow: hidden;
		}
		.vux-close {
			margin-top: 8px;
			margin-bottom: 8px;
		}
	}
</style>